// .jsx -> .tsx  
// App <- Hello  
// 父组件 向子组件提供 props 以便jsx的输出  
// 子组件是打工的，prop-types 约束类型
// 面向对象中，特性 组件间的默契 负责？
// interface 接口
import * as React from 'react'
// 定义一个接口，父子组件间用一下  
// 子组件需要实现props 规定的接口属性和方法  
// ts 语法能力 面向对象的能力更强
// ts 可以让我们java 一样
// 接口定义区域
interface Props {
    userName:string;
    age:number;
} 

// 接口和组件结合 组件要实现接口  
// props ? { } 空对象 
// 泛型
// React.FC 类信息定义由 @types/react 提供
// export const HelloComponent:React.FC = (props:Props) => {
const HelloComponent:React.FC<Props> = (props) => {
    return (
        <h2>
            hello user:{props.userName}!
            <br/>
            年纪：{props.age}!
        </h2>
    )
}
export default HelloComponent